<template>
  <div class="app-container">
    <el-card>
      <!--工具栏-->
      <div class="head-container">
        <eHeader :permission="permission"/>
        <crudOperation :permission="permission" />
      </div>
      <!--工具栏-->

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="标题" />
        <el-table-column prop="img" label="图片" >
          <template slot-scope="scope">
            <el-image :src="baseApi + '/car/' + scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="内容" />
        <el-table-column prop="addTime" label="发布日期" />
        <el-table-column  label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-card>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="500px"
    >
      <el-form ref="form" :model="form" size="small" label-width="80px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" style="width: 370px;"/>
        </el-form-item>

        <el-form-item label="图片" prop="img"
        >
          <div style="text-align: center">
            <el-upload
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-error="handleError"
              :headers="headers"
              :action="uploadImgApi"
              class="avatar-uploader"
            >
              <img style="width: 100px; height: 80px" :src="baseApi + '/car/' + form.img" title="点击上传图片" class="avatar">
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item
          label="描述"
          prop="description"
        >
          <el-input
            v-model="form.description"
            style="width: 370px;"
          />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="text" @click="crud.cancelCU">
          取消
        </el-button>
        <el-button
          :loading="crud.cu === 2"
          type="primary"
          @click="crud.submitCU"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import checkPermission from '@/utils/permission'
  import crudNotice from '@/api/ceamNotice'
  import eHeader from './header'
  import CRUD, { presenter, form } from '@crud/crud'
  import crudOperation from '@crud/CRUD.operation'
  import pagination from '@crud/Pagination'
  import udOperation from '@crud/UD.operation'
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth'

  // crud交由presenter持有
  const crud = CRUD({
    title: '公告',
    url: 'api/notice',
    sort: ['sort,asc', 'id,desc'],
    crudMethod: { ...crudNotice }
  })
  const defaultForm = { name: null, img: '', description: null  }
  export default {
    components: { eHeader, crudOperation, pagination, udOperation },
    mixins: [presenter(crud),form(defaultForm)],
    data() {
      return {
        headers: {
          'Authorization': getToken()
        },
        delLoading: false,
        permission: {
          add: ['admin', 'notice:add'],
          edit: ['admin', 'notice:edit'],
          del: ['admin', 'notice:del']
        }
      }
    },
    computed: {
      ...mapGetters([
        'uploadImgApi',
        'baseApi'
      ])
    },
    created() {
      this.$nextTick(() => {
        //this.init()
      })
    },
    methods: {
      checkPermission,
      handleSuccess(response, file, fileList) {
        console.log("upload>>", response)
        this.form.img = response;
        this.$notify({
          title: '图片上传成功',
          type: 'success',
          duration: 2500
        })
        store.dispatch('GetInfo').then(() => {})
      },
      // 监听上传失败
      handleError(e, file, fileList) {
        const msg = JSON.parse(e.message)
        this.$notify({
          title: msg.message,
          type: 'error',
          duration: 2500
        })
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          routeCn: data.routeCn,
          name: data.name,
          startPoint: data.startPoint,
          endPoint: data.endPoint,
          description: data.description
        }
        _this.dialog = true
      }
    }
  }
</script>

<style scoped>

</style>
